<template>
  <view class="main-box">
    <view class="img-container">
      <image
        class="topImg"
        src="../../../static/images/bgc_01.png"
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
      ></image>
      <view style="position:absolute;top:30rpx;right:40rpx">
         <image style="width:40rpx;height:40rpx" src="../../../static/images/photo.png" mode="scaleToFill" />
         <text style="color:#F0E5E5;position:relative;top:-6rpx;left:6rpx">{{userName}}</text>
      </view> 
    </view>
    <view class="containerBody">
      <view
        class="warning-time" style="margin-top:40rpx"
        v-if="status==='未提交'"
      >
        <text>距离填报日报时间还剩</text>
        <text class="time">
          {{ distanceDate }}
        </text>
      </view>
      <view v-else class="warning-time daily_down" style="margin-top:40rpx">{{status}}</view>
	  <view  class="warning-time daily_down" style="color:#333;font-weight: bold;">严禁填报涉密内容</view>
     <!--  <view
        class="warning-time"
        v-if="!timeShow && !submitStatusObj"
      >
        <text>距提交日志已延迟</text>
        <text class="time" style="color: #d81517">
          {{ distanceDate.replace(/\-/g, '') }}
        </text>
      </view> -->
	 
      <view class="content-card-box">
        <view class="card-left">
          <cmpFillCard
            @handleDaily="handleForwardDocument"
            :cardData="documentDailyData"
            style="height: 420rpx; flex: 1"
          />
        </view>
        <view class="card-right">
          <view style="flex: 1; margin-bottom: 30rpx">
            <cmpFillCard
              :cardData="writeDailyData"
              @handleDaily="handleWriteDaily"
            />
          </view>
           
          <view style="flex:1;position:relative" >
          <view v-if="editerStatus" style="position:absolute;z-index:999;left:140rpx;top:46rpx">
            <u-badge  isDot></u-badge>
          </view>
            
            <cmpFillCard
              :cardData="editDailyData"
              @handleDaily="handleEditDaily"
            />
          </view>
        </view>
      </view>
      <view style="width: 100%; box-sizing: border-box; height: 126rpx">
        <image
          class="bottomImg"
          src="../../../static/images/bannerBom.png"
        ></image>
      </view>
      <u-modal :show="show" width="690rpx" :showConfirmButton="false">
        <view class="slot-container">
          <u--image
            :showLoading="true"
            src="../../../static/images/fawicon.png"
            width="120rpx"
            height="146rpx"
          ></u--image>
          <view class="document-info">确认转交给文书？</view>
          <view class="document-btn">
            <u-button
              @click="handleClose"
              :customStyle="{
                boxShadow: 'none !important',
                width: '280rpx',
                height: '90rpx',
                borderRadius: '10rpx',
                color: '#0C347E',
                border: '1px solid #0C347E',
                background: '#F5F5F5',
                fontSize: '36rpx',
                borderRadius: '45rpx',
                fontWeight: 400,
                color: '#0C347E',
                marginRight: '50rpx',
              }"
              >取消</u-button
            >
            <u-button
              @click="handleSubmit"
              :customStyle="{
                boxShadow: 'none !important',
                width: '280rpx',
                borderRadius: '10rpx',
                height: '90rpx',
                color: '#FFFFFF',
                fontSize: '36rpx',
                border: '1px solid #0C347E',
                background: '#0C347E',
                borderRadius: '45rpx',
              }"
              >转发</u-button
            >
          </view>
        </view>
      </u-modal>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
  </view>
</template>
<script>
import cmpFillCard from '../../../components/cmp-fill-card.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import {
  getDetailSysEndTime,
  checkTransferedDailyFun,
  setMessageData,
  getDailyByClerkFun,countdown ,getSelectTransferDailyFun
} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      editerStatus:true,
      status:"",
      timeShow: false,
      timer: null,
      reFresh: true,
      submitStatusObj: {},
      timeData: '',
      distanceDate: '',
	    valueTime: moment(new Date()).format('YYYY-MM-DD'),
      show: false,
      notifyShow: false,
      documentDailyData: {
        title: '转文书',
        info: '当日工作由文书代为填报',
        height: '410rpx',
        imgSrc: '../../../static/images/document.png',
      },
      writeDailyData: {
        title: '写日报',
        info: '填报当日日报',
        height: '190rpx',
        imgSrc: '../../../static/images/write_daily.png',
      },
      editDailyData: {
        title: '改日报',
        info: '修改文书提交的日报',
        count: 4,
        height: '190rpx',
        imgSrc: '../../../static/images/edit_daily_a.png',
      },
      userName:''
    }
  },
  mounted(){
    this.userName=this.$store.state.userInfo.userName 
  },
  onShow() {
    getSelectTransferDailyFun({userId: this.userInfo.userId,flag:0}).then(res =>{         
     //改日报里面有没有有内容，有就加个红点
     res.data.length>0? this.editerStatus =true:this.editerStatus =false;
    })
    countdown({userId:this.userInfo.userId}).then(res=>{    
      this.status=res.data.status
    })
   
    this.countDown()
    getDetailSysEndTime().then((timeRes) => {
      this.timeData = timeRes.data.endTime
    })
    getDailyByClerkFun({
      leaderid: this.userInfo.userId,
      createBy: this.userInfo.userId,
	   createDate: this.valueTime,
    }).then((res) => {
      this.submitStatusObj = res.data      
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  onUnload() {
    clearInterval(this.timer)
  },
  onHide() {
    clearInterval(this.timer)
  },
  onLoad: () => {

  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  watch: {
    $route: {
      handler(newRouter) {
        clearInterval(this.timer)
      },
      immediate: true,
    },
  },
  methods: {
    countDown() {
      this.timer = setInterval(() => {
        let now = new Date()
        let year = now.getFullYear()
        let month = now.getMonth() + 1 //js从0开始取
        let date = now.getDate()
        let deadlineStr = year + '/' + month + '/' + date + ' ' + this.timeData
        let start = moment(new Date()) //获取开始时间
        let end = moment(new Date(deadlineStr)) //结束时间
        let diff = end.diff(start) //时间差
        if (diff > 0) {
          this.timeShow = true
        } else {
          this.timeShow = false
        }
        this.distanceDate = `${
          (Math.abs(moment.duration(diff).hours()) > 0
            ? moment.duration(diff).hours() + '时'
            : '') +
          (Math.abs(moment.duration(diff).minutes()) > 0
            ? moment.duration(diff).minutes() + '分'
            : '') +
          moment.duration(diff).seconds() +
          '秒'
        }` //格式化为需要的格式 这里是时分秒
      }, 1000)
    },
    handleClose() {
      this.show = false
    },
    handleSubmit() {
      checkTransferedDailyFun({
        userId: this.userInfo.userId,
      }).then((res) => { 
        setMessageData({
          type: 3,
          leaderid: this.userInfo.userId,         
        })
        uni.showToast({
          title: '已转交文书',
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
        this.show = false
      })
    },
    handleForwardDocument() {    
      if (this.submitStatusObj) {
        uni.showToast({
          title: '当日日报已提交，无法重复操作',
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
      } else {
        this.show = true
      }
    },
    handleEditDaily() {
     /*  if (this.submitStatusObj) {
        if (this.submitStatusObj.status == '0') {
          uni.showToast({
            title: '已提交，无法重复操作',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
        } else if (
          this.submitStatusObj.flag == '0' &&
          this.submitStatusObj.status == '1'
        ) {
          uni.navigateTo({
            url: '/pagesA/leader-daily/daily-edit-home/edit-list',
          })
        } else if (this.submitStatusObj.flag == '1') {
          uni.showToast({
            title: '已转发文书，无法更改',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
        } 
      } 
        else{  }   */  
          uni.navigateTo({
            url: '/pagesA/leader-daily/daily-edit-home/edit-list',
          })
       
    },
    handleWriteDaily() {
       if (this.submitStatusObj) {
        uni.showToast({
          title: '当日日报已提交，无法重复操作',
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
      } else { 
        uni.navigateTo({
          url: '/pagesA/leader-daily/daily-edit-home/write-form',
        })
      } 
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  components: {
    cmpFillCard,
    cmpTabBar,
  },
}
</script>

<style>
	page{
		background-color: #F5F9FF;
	}
</style>
<style lang="scss" scoped>
.content-card-box {
  margin-top: 30rpx;
  display: flex;
  .card-left {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
    margin: 0rpx 32rpx;
  }
  .card-right {
    margin: 0rpx 32rpx 0rpx 0rpx;
    flex: 1;
    position: relative;
  }
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  .slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.document-info {
  margin-top: 24rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #383839;
  line-height: 30rpx;
}
.document-btn {
  display: flex;
  margin: 75rpx 0rpx 20rpx 0rpx;
}
.img-container {
  width: 100%;
}
.topImg {
  width: 100%;
}
.containerBody {
  .warning-time {
    height: 60rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 32rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  .daily_down {
    font-size: 32rpx;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  width: 100%;
  bottom: -6rpx;
}
</style>
